<template>
	<view class="box">
		
		<!-- 背景 -->
		<view class="background">
			<image :src="userInfo.userBack"></image>
		</view>
		<view class="info" style="padding: 15rpx;box-sizing: border-box;display: flex;">
			<image :src="userInfo.userHeader" style="width: 130rpx; margin-top: 10px;height: 130rpx;border-radius: 50%;"></image>
			<view style="font-size: 35rpx;color: #E0E0E0;padding:10px;margin-top: 15rpx;">
				<view>{{userInfo.userName}}</view>
				
				<view style="font-size: 28rpx;color: #808080;margin-top: 10rpx
				;">{{userInfo.userMess==null?'该用户太懒了！':userInfo.userMess}}</view>
			</view>
		</view>
		<!-- 业务 -->
		<view class="lo" >
			<view class="Vip">
				<Vip color="#f21a38" :text="'ID '+userInfo.userId"></Vip>
			</view>
			<view class="Vip">
				<Vip color="#f21a38" :light="userInfo.userVip>0" :text="'VIP '+userInfo.userVip"></Vip>
			</view>
			<view class="Vip">
				<Vip color="rgb(116, 115, 113)" :text="'SV '+userInfo.userSv"></Vip>
			</view>
			<view class="Vip">
				<Vip color="rgb(30, 155, 215)" :text="userInfo.userSex==1?'♂':'♀'"></Vip>
			</view>
			<view class="Vip">
				<Vip @click="toggerBack" color="rgb(215, 157, 41)" text="📚"></Vip>
			</view>
		</view>
	</view>
</template>

<script>
	import Vip from "../button/vip.vue"
	import Confirm from "../modle/confirm.vue"
	
	export default {
		components:{Vip,Confirm},
		props:["userInfo"],
		data() {
			return {
				openId:null,
				loginFlag:false
			}
		},
		methods: {
			toggerBack(){
			},
			
			getUserInfo(va){
				uni.showToast({
					title:"自动登录中"
				})
				var that = this
				uni.login({
					success(code) {
						uni.request({
							url:"https://api.q.qq.com/sns/jscode2session?appid=1112182184&secret=xqRJjU4oyzQe3gb3&js_code="+code.code+"&grant_type=authorization_code",
							success(va) {
								// 用户唯一标识ID
								console.log(va)
								var openId=va.data.openid
								uni.setStorage({
									key: 'openId',
									data:openId,
									success() {
										uni.showToast({
											title:"登录成功,初始化信息!"
										})
										that.loginFlag=false
										that.openId=openId
										// 初始化信息
									}
								})
								
								
							},
							fail() {
								uni.showToast({
									title:"登录失败，请手动登录"
								})
							}
						})
					}
				})
			},
			initData(){
				// 发起请求进行后端登录 获取内容 
		
			}
		}
	}
</script>

<style scoped>
	.box{
		width: 100%;
		height: 230rpx;
		border-radius: 15rpx;
		position: relative;
	}
	.Vip{
		width: 40px;
		height: 15px;
		margin-right: 10rpx;
	}
	.background{
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #ddb349;
		border-radius: 15rpx;
	}
	.background>image{
		width: 100%;
		height: 100%;border-radius: 15rpx;
	}
	.lo{
		box-sizing: border-box;
		padding: 10rpx;
		width: 100%;
		height: auto;
		display: flex;
		position: absolute;
		bottom: 0rpx;
	}
	.info{
		box-sizing: border-box;
		width: 100%;
		height: 150rpx;
		z-index: 50;
		position: absolute;
		padding: 10rpx;
	}

</style>
